<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css 样式思路
			 1.通配选择器：微软雅黑，#f5f5f5 浅灰，外边距至0
			 2.#forget:边框，内边距，外边距，阴影【透明度.1】，文字居中
			 3.img:边框倒角，内外边距
			 4.h3：颜色，内外边距
			 5.p：字体大小，颜色
			 6.p+span：span，内外边距
			 */
			*{
				background: #f5f5f5;
				margin: 10px;
			}
			#forget{
				width: 310px;
				height: 630px;
				border: 1px solid gainsboro;
				padding: 10px;
				margin: 10px;
				box-shadow: 7px 3px 20px 5px gray;
				border-radius: 10px;
				text-align: center;
				margin-left: 500px;
			}
			img{
				border-radius: 10px;
				margin: 2px;
				padding: 2px;
			}
			h3{
				color: #000000;
				font-size: 17px;
				 padding: 3px;
				 margin: 3px;
			}
			.o{
				font-size: 20px;
				color: #f01234;
			}
			.i{
				font-size: 13px;
				margin: 4px;
				padding: 4px;
			}
		</style>
	</head>
	<body>
	 <!-- 网页：1.；html 结构【原生图分析】-->
	<div id="forget">
		<img src="img/微信图片_20241225100949.jpg" width="300px" height="500px" alt="小米SU7">
		<h3>小米SU7</h3>
		<p class="o">$279999.00</p>
		<p class="i">已有<span>10万+</span>评价</p>
	</div>
		</body>
</html>